Background not showing behind floating divs | float: left; দেওয়ার পর প্রবলেম হচ্ছে
Md.Masum Billah
| Asked on 2022-10-06 | • HTML, CSS
float: left; দেওয়ার পর main DIV এর ব্যাকগ্রাউন্ড কালার আস্তেছেনা । কি প্রবলেম বুঝতে পারছিনা।
what's wrong with this code?
The background disappears behind the divs when I add float: left;. But when I remove the float: left, everything looks good.
Code:
<html>
<head>
<style type="text/css">
#first{
width: 600px;
background-color: #345752;
padding: 10px;
}
.text{
float: left;
width: 298px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="first">
<div class="text">text 1</div>
<div class="text">text 2</div>
</div>
</body>
</html>
<head>
<style type="text/css">
#first{
width: 600px;
background-color: #345752;
padding: 10px;
}
.text{
float: left;
width: 298px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="first">
<div class="text">text 1</div>
<div class="text">text 2</div>
</div>
</body>
</html>
এটা ঠিক করার জন্য #first class এ overflow:auto; দিতে হবে।
One popular solution is to add overflow: auto; to your container div: #first:
width: 600px;
background-color: #345752;
padding: 10px;
overflow:auto;
}
I agree that wrapping those three in a div is the right approach. The reason that you see no background in the #first is because all of the contained divs are floated making their height essentially zero as far as #first is concerned.
Solution is:
OR